<div class="row-fluid">
    Specify which fields to be plotted on X-axis and Y-axis. Both fields have to be numeric.
    You can also specify custom labels for X and Y axes (optional).
    The specified field in Color Field will be grouped by its values with different colors.
    The specified field in Bubble Size Field has to be numeric field, and its values will affect the bubble size in the chart.
    The larger the value, the bigger the bubble.
</div>

<div class="row-fluid">
    <div class="span4">
        <h6>X-axis Field
            <tip>Must be a numeric field.</tip>
        </h6>
        <input bs-typeahead="fields.list" type="text" placeholder="Required field" class="input-large"
               ng-model="panel.xaxis" ng-change="set_refresh(true)">
    </div>
    <div class="span4">
        <h6>X-axis Label</h6>
        <input type="text" placeholder="Optional" class="input-large"
               ng-model="panel.xaxisLabel" ng-change="set_refresh(true)">
    </div>
</div>

<div class="row-fluid">
    <div class="span4">
        <h6>Y-axis Field
            <tip>Must be a numeric field.</tip>
        </h6>
        <input bs-typeahead="fields.list" type="text" placeholder="Required field" class="input-large"
               ng-model="panel.yaxis" ng-change="set_refresh(true)">
    </div>
    <div class="span4">
        <h6>Y-axis Label</h6>
        <input type="text" placeholder="Optional" class="input-large"
               ng-model="panel.yaxisLabel" ng-change="set_refresh(true)">
    </div>
</div>

<div class="row-fluid">
    <div class="span4">
        <h6>Color Field
            <tip>The color in the plot will be generated according to this field.</tip>
        </h6>
        <input bs-typeahead="fields.list" type="text" placeholder="Optional" class="input-large"
               ng-model="panel.colorField" ng-change="set_refresh(true)">
    </div>
    <div class="span4">
        <h6>Bubble Size Field
            <tip>Must be a numeric field.</tip>
        </h6>
        <input bs-typeahead="fields.list" type="text" placeholder="Optional" class="input-large"
               ng-model="panel.bubbleSizeField" ng-change="set_refresh(true)">
    </div>
    <div class="span3">
        <h6>Max Rows</h6>
        <input type="number" class="input-medium" ng-model="panel.max_rows" ng-change="set_refresh(true)">
    </div>
</div>

<div class="row-fluid">
    <h5>Real-time (Auto-refresh)</h5>
    <div class="span1">
        <label class="small">Enable</label><input type="checkbox" ng-model="panel.refresh.enable"
                                                  ng-checked="panel.refresh.enable">
    </div>
    <div class="span2">
        <label class="small">Interval (seconds)
            <tip>The minimum value is 2.</tip>
        </label>
        <input type="number" min="2" class="input-mini" ng-model="panel.refresh.interval">
    </div>
</div>
